<template>
  <view class="my-page" :style="{ paddingTop: `${totalNavigationHeight * 2}rpx` }">
    <view class="my-page-bg">
      <image class="my-ip" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/user_ip.png" />
    </view>
    <NavigationBar navigation-title="我的" :show-back="false" />
    <view class="my-header">
      <view class="header-left">
        <view class="my-img">
          <image class="header-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/img_${!loginFlag || !store.gender || store.gender === '2' ? 'default' : store.gender === 'O' ? 'girl' : 'boy'}.png`" />
          <image v-if="store.vip?.flag === 1" class="vip-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250611/icon_vip_1.png" />
          <image v-if="store.vip?.flag === 2" class="vip-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250611/vip_gray.png" />
        </view>

        <text class="my-name">
          {{ !loginFlag ? '请先登录' : store.userName }}
        </text>
        <image v-if="loginFlag && store.gender && store.gender !== '2'" class="my-icon" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_${store.gender === 'O' ? 'girl' : 'boy'}.png`" />
      </view>
      <view v-if="!loginFlag" class="my-btn" @click="toLogin">
        去登录
      </view>
      <view v-else class="my-btn" @click="toSignIn">
        去签到
      </view>
    </view>
    <view class="my-info">
      <view class="info-item">
        <text class="item-num">
          {{ loginFlag ? `${dataDetail?.accuracyRate || 0}%` : '--' }}
        </text>
        <text class="item-text">
          答题正确率
        </text>
      </view>
      <view class="info-item">
        <text class="item-num">
          {{ loginFlag ? (dataDetail?.integralBalance || 0) : '--' }}
        </text>
        <text class="item-text">
          星币
        </text>
      </view>
    </view>

    <view v-if="[1, 2].includes(store.vip?.flag)" class="my-vip">
      <image class="vip-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/img_bg.png" />
      <view class="vip-top">
        <view class="vip-left">
          <text class="top-text">
            VIP权益
          </text>
          <text class="top-desc">
            {{ store.vip?.duration }}到期
          </text>
        </view>

        <view class="vip-right">
          <template v-if="store.vip?.flag === 1">
            <text class="right-text">
              门店已为您开通
            </text>
            <text class="right-price">
              ￥{{ store.vip?.monthMoney }}/月
            </text>
          </template>

          <view v-else class="vip-info">
            <text class="right-text">
              已过期
            </text>
            <text class="right-desc">
              联系门店开通
            </text>
          </view>
        </view>
      </view>

      <view class="vip-bottom">
        <view class="content-item">
          <image class="item-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/icon_read_3.png" />
          <text class="item-text">
            阅读测验
          </text>
        </view>

        <view class="content-item">
          <image class="item-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/icon_mini_3.png" />
          <text class="item-text">
            微学堂课程
          </text>
        </view>

        <view class="content-item">
          <image class="item-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/icon_hosting_3.png" />
          <text class="item-text">
            托管日历
          </text>
        </view>

        <view class="content-item">
          <image class="item-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250603/icon_ws_3.png" />
          <text class="item-text">
            五商视频
          </text>
        </view>
      </view>
    </view>

    <view class="my-collect" @click="toCollect">
      <text class="collect-title">
        我的收藏
      </text>
      <image class="collect-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_more.png" />
    </view>

    <view v-if="dataDetail?.mainAccountFlag === 1" class="my-collect" @click="toAccount">
      <text class="collect-title">
        家庭账户管理
      </text>
      <image class="collect-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_more.png" />
    </view>

    <view class="my-content">
      <view class="content-title">
        阅读数据
      </view>
      <view class="content-list">
        <view v-for="(item, index) in readList" :key="item.name" class="my-content-item">
          <view class="item-top">
            <image class="item-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_user_${index + 1}.png`" />
            <text class="item-name">
              {{ item.name }}
            </text>
          </view>
          <view class="item-bottom">
            <text class="item-num">
              {{ loginFlag ? formatPrice(item.value || 0) : '--' }}
            </text>
            <text class="item-unit">
              {{ item.unit }}
            </text>
          </view>
        </view>
      </view>
      <view class="content-title">
        托管数据
      </view>
      <view class="content-list">
        <view v-for="(item, index) in hostingList" :key="`hosting${index}`" class="my-content-item">
          <view class="item-top">
            <image class="item-img" :src="`https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/icon_user_${index + 5}.png`" />
            <text class="item-name">
              {{ item.name }}
            </text>
          </view>
          <view class="item-bottom">
            <text class="item-num">
              {{ loginFlag ? formatPrice(item.value || 0) : '--' }}
            </text>
            <text class="item-unit">
              {{ item.unit }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavigationBar from '@/components/navigation-bar/index.vue';
import { formatPrice } from '@/utils/common';
import { useUserStore } from '@/store';
import { getNavigationHeight, isLogin } from '@/utils/auth';
import { getDataBoard, getReadResult } from '@/api/my';
import type { GetDataBoardResult, ReadResult } from '@/api/my/type';

const store = useUserStore();
const loginFlag = ref<boolean>(isLogin());

const totalNavigationHeight = ref(getNavigationHeight());

const readList = ref([
  {
    name: '共阅读书籍',
    value: 0,
    unit: '本',
  },
  {
    name: '共阅读字数',
    value: 0,
    unit: '万字',
  },
  {
    name: '已上课时',
    value: 0,
    unit: '课时',
  },
  {
    name: '剩余课时',
    value: 0,
    unit: '课时',
  },
]);
const hostingList = ref([
  {
    name: '共托管天数',
    value: 0,
    unit: '天',
  },
  {
    name: '本月已托管天数',
    value: 0,
    unit: '天',
  },
  {
    name: '剩余托管天数',
    value: 0,
    unit: '天',
  },
]);

// 去登录
const toLogin = () => {
  uni.navigateTo({
    url: '/pages/views/login/index',
  });
};

const toSignIn = () => {
  uni.navigateTo({
    url: '/pages/views/signIn/index',
  });
};

const toCollect = () => {
  uni.navigateTo({
    url: '/pages/views/collect/index',
  });
};

const toAccount = () => {
  uni.navigateTo({
    url: '/pages/views/account/index',
  });
};

const dataDetail = ref<GetDataBoardResult>();
const getData = () => {
  dataDetail.value = undefined;

  getReadResult().then((res: ReadResult) => {
    readList.value[0].value = res.readBooks;
    readList.value[1].value = res.readBooksFonts;
  });

  getDataBoard().then((res: GetDataBoardResult) => {
    readList.value[2].value = res.readHasNum;
    readList.value[3].value = res.readResidue;
    hostingList.value[0].value = res.trustTotalNum;
    hostingList.value[1].value = res.trustMonthHasNum;
    hostingList.value[2].value = res.trustResidue;
    dataDetail.value = res;
  });
};

onShow(() => {
  if (loginFlag.value)
    getData();
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: store.share_txt,
    imageUrl: store.share_pic_url,
  };
});
</script>

<style lang="scss" scoped>
.my-page {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .my-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 530rpx;
    background: linear-gradient( 180deg, #B7EC98 0%, rgba(255, 255, 255, 0.4) 100%);

    .my-ip {
      position: absolute;
      right: 0;
      bottom: 84rpx;
      width: 195rpx;
      height: 216rpx;
    }
  }

  .my-header {
    position: relative;
    padding: 20rpx 64rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header-left {
      display: flex;
      align-items: center;
    }

    .my-img {
      position: relative;
      width: 88rpx;
      height: 88rpx;

      .header-img {
        width: 88rpx;
        height: 88rpx;
      }

      .vip-icon {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30rpx;
        height: 30rpx;
      }
    }

    .my-name {
      padding: 0 16rpx;
      font-size: 32rpx;
      color: #251504;
    }

    .my-icon {
      width: 40rpx;
      height: 40rpx;
    }

    .my-btn {
      padding: 0 32rpx;
      background: linear-gradient( 90deg, #FFA029 0%, #FFCD29 100%);
      box-shadow: inset 0 -4rpx 20rpx 0 #FFB085;
      border-radius: 28rpx;

      font-weight: bold;
      font-size: 28rpx;
      line-height: 56rpx;
      color: #FFFFFF;
    }
  }

  .my-info {
    position: relative;
    padding: 12rpx 40rpx;
    display: flex;

    .info-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .item-num {
        font-weight: bold;
        font-size: 36rpx;
        color: #547A36;
        line-height: 54rpx;
      }

      .item-text {
        padding-top: 8rpx;
        font-size: 24rpx;
        color: #251504;
        line-height: 36rpx;
      }
    }
    .info-item:first-child {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        top: 17rpx;
        right: -1rpx;
        width: 0;
        height: 64rpx;
        border: 1rpx dashed #547A36;
      }
    }
  }

  .my-vip {
    position: relative;
    margin: 20rpx 40rpx 8rpx;
    width: 670rpx;
    height: 246rpx;
    padding: 30rpx 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .vip-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 670rpx;
      height: 246rpx;
    }

    .vip-top {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .vip-left {
        display: flex;
        flex-direction: column;

        .top-text {
          font-size: 34rpx;
          color: #FFEDCF;
          font-weight: bold;
          line-height: 42rpx;
        }

        .top-desc {
          font-size: 18rpx;
          color: rgba(255,237,207,0.5);
          line-height: 20rpx;
        }
      }

      .vip-right {
        display: flex;
        align-items: center;

        .right-price {
          padding-left: 16rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #FEECCE;
          line-height: 36rpx;
        }

        .right-text {
          font-size: 20rpx;
          color: #FEECCE;
          line-height: 36rpx;
        }

        .vip-info {
          display: flex;
          flex-direction: column;
          align-items: flex-end;

          .right-desc {
            padding-top: 4rpx;
            font-size: 18rpx;
            color: rgba(255,237,207,0.5);
            line-height: 20rpx;
          }
        }
      }
    }

    .vip-bottom {
      position: relative;
      display: flex;
      justify-content: space-between;

      .content-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .item-img {
          width: 61rpx;
          height: 61rpx;
        }

        .item-text {
          padding-top: 10rpx;
          font-size: 22rpx;
          color: #EBCB9F;
          line-height: 24rpx;
        }
      }
    }
  }

  .my-collect {
    position: relative;
    margin: 12rpx 40rpx;
    padding: 0 32rpx;
    height: 104rpx;
    background: #FFFFFF;
    box-shadow: 0 0 32rpx 0 rgba(132,179,245,0.08);
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .collect-title {
      font-size: 32rpx;
      color: #251504;
    }

    .collect-img {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .my-content {
    margin-top: 36rpx;
    flex: 1;
    overflow: auto;
    padding: 0 40rpx;

    .content-title {
      padding-bottom: 24rpx;
      font-size: 32rpx;
      color: #251504;
      line-height: 48rpx;
    }
    .content-title:last-child {
      margin-top: 32rpx;
    }

    .content-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .my-content-item {
        width: 327rpx;
        padding: 24rpx 32rpx;
        background: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;

        .item-top {
          display: flex;
          align-items: center;
          padding-bottom: 12rpx;

          .item-img {
            width: 48rpx;
            height: 48rpx;
          }

          .item-name {
            padding-left: 8rpx;
            font-size: 28rpx;
            color: #251504;
            line-height: 40rpx;
          }
        }

        .item-bottom {
          display: flex;
          align-items: flex-end;

          .item-num {
            font-weight: bold;
            font-size: 48rpx;
            color: #251504;
            line-height: 68rpx;
          }

          .item-unit {
            padding-left: 8rpx;
            font-size: 28rpx;
            color: #251504;
            line-height: 56rpx;
          }
        }
      }
    }
    .content-list:last-child {
      margin-bottom: 32rpx;
    }
  }
}
</style>
